GraphQL Subscriptions এবং Realtime Data Fetching

GraphQL হল একটি শক্তিশালী API প্রযুক্তি যা ক্লায়েন্ট এবং সার্ভারের মধ্যে ডেটা আদান-প্রদান সহজ করে তোলে। এটি queries, mutations, এবং subscriptions ব্যবহার করে ডেটা পরিচালনা করে। Subscriptions হল GraphQL এর একটি শক্তিশালী ফিচার, যা রিয়েল-টাইম ডেটা আপডেট করার জন্য ব্যবহৃত হয়।

Meteor এ GraphQL Subscriptions ব্যবহার করে আপনি রিয়েল-টাইম ডেটা ফেচিং এবং আপডেট করতে পারেন, যা ক্লায়েন্টকে ডেটার পরিবর্তন সম্পর্কে অবহিত করতে সাহায্য করে।

GraphQL Subscriptions কী?

GraphQL Subscriptions একটি বিশেষ ধরনের GraphQL অপারেশন যা ক্লায়েন্টকে রিয়েল-টাইম ডেটা আপডেট পাঠাতে সক্ষম করে। ক্লায়েন্ট একটি subscription এর জন্য সাবস্ক্রাইব করলে, সার্ভার তখন ডেটা পরিবর্তনের পর ক্লায়েন্টকে অবহিত করে। এটি সাধারনত WebSocket এর মাধ্যমে কাজ করে।

GraphQL Subscriptions এর ব্যবহারের সুবিধা

• Realtime updates: ডেটা পরিবর্তন হলে ক্লায়েন্টকে তাৎক্ষণিকভাবে অবহিত করা।
• Efficient data fetching: একাধিক ডেটা রাউন্ড ট্রিপ ছাড়াই একযোগে রিয়েল-টাইম ডেটা ফেচিং।
• Bidirectional communication: ক্লায়েন্ট এবং সার্ভারের মধ্যে রিয়েল-টাইম যোগাযোগ।

Meteor এ GraphQL Subscriptions সেটআপ করা

Meteor এ GraphQL Subscriptions ব্যবহার করার জন্য আপনাকে Apollo Server এবং WebSocket সাপোর্ট যোগ করতে হবে। এখানে একটি সাধারণ উদাহরণ দেওয়া হলো কিভাবে Meteor এ GraphQL Subscriptions সেটআপ করতে হয়।

Step 1: প্রয়োজনীয় প্যাকেজগুলি ইনস্টল করা

প্রথমে, আপনি Apollo Server এবং Subscriptions-Transport-WS প্যাকেজগুলি ইনস্টল করবেন:

meteor npm install apollo-server-express graphql subscriptions-transport-ws express

এখানে, Apollo Server এবং GraphQL সার্ভার তৈরি করার জন্য, এবং Subscriptions-Transport-WS প্যাকেজটি WebSocket এর মাধ্যমে Subscriptions পরিচালনার জন্য ব্যবহৃত হবে।

Step 2: Apollo Server সেটআপ করা

Meteor এ Apollo Server সেটআপ করতে, Express এবং Apollo Server ব্যবহার করা হয়। নিচে একটি সাদাসিধে উদাহরণ দেওয়া হলো।

import { Meteor } from 'meteor/meteor';
import { ApolloServer, gql } from 'apollo-server-express';
import express from 'express';
import { makeExecutableSchema } from 'graphql-tools';
import { PubSub } from 'graphql-subscriptions';

// Instantiate express and create Apollo server
const app = express();
const pubsub = new PubSub();

// GraphQL schema definition
const typeDefs = gql`
  type Query {
    hello: String
  }

  type Subscription {
    messageAdded: String
  }

  type Mutation {
    addMessage(message: String!): String
  }
`;

// Resolvers to define how data is fetched
const resolvers = {
  Query: {
    hello: () => 'Hello, world!',
  },
  Mutation: {
    addMessage: (_, { message }) => {
      // Trigger subscription event when message is added
      pubsub.publish('messageAdded', { messageAdded: message });
      return message;
    },
  },
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator(['messageAdded']),
    },
  },
};

// Create Apollo Server with Express
const server = new ApolloServer({
  typeDefs,
  resolvers,
});

server.applyMiddleware({ app });

Meteor.startup(() => {
  // Listen on port 4000 for GraphQL
  app.listen(4000, () =>
    console.log(`GraphQL server is running at http://localhost:4000/graphql`)
  );
});

এখানে, messageAdded subscription তৈরি করা হয়েছে, যা নতুন মেসেজ সার্ভারে যুক্ত হলে ক্লায়েন্টকে অবহিত করবে। pubsub.publish এর মাধ্যমে একটি ইভেন্ট ট্রিগার করা হয় এবং asyncIterator এর মাধ্যমে ক্লায়েন্টকে সাবস্ক্রাইব করতে বলা হয়।

Step 3: Client-side Subscription সেটআপ করা

Meteor ক্লায়েন্টে Apollo Client ব্যবহার করে subscription সেটআপ করা হয়। নিচে ক্লায়েন্ট সাইডে একটি সাবস্ক্রিপশন উদাহরণ দেওয়া হলো:

import { ApolloClient, InMemoryCache, gql } from '@apollo/client';
import { WebSocketLink } from '@apollo/client/link/ws';

// Apollo Client setup with WebSocket link
const link = new WebSocketLink({
  uri: `ws://localhost:4000/graphql`,
  options: {
    reconnect: true,
  },
});

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

// Subscription Query
const MESSAGE_ADDED = gql`
  subscription {
    messageAdded
  }
`;

client
  .subscribe({ query: MESSAGE_ADDED })
  .subscribe({
    next({ data }) {
      console.log("New message received:", data.messageAdded);
    },
    error(err) {
      console.error('Subscription error', err);
    },
  });

এখানে, WebSocketLink ব্যবহার করে আপনি WebSocket এর মাধ্যমে সার্ভারে সাবস্ক্রাইব করতে পারবেন এবং যখনই messageAdded subscription ট্রিগার হবে, তা ক্লায়েন্ট সাইডে next() ফাংশন দ্বারা রিসিভ হবে।

Step 4: Mutation to trigger Subscription

এখন, ক্লায়েন্ট থেকে মেসেজ পাঠানোর জন্য একটি mutation তৈরি করা হয়।

const ADD_MESSAGE = gql`
  mutation addMessage($message: String!) {
    addMessage(message: $message)
  }
`;

client.mutate({
  mutation: ADD_MESSAGE,
  variables: { message: "Hello, this is a new message!" },
})
.then(response => {
  console.log('Message added:', response.data.addMessage);
})
.catch(error => {
  console.error('Error adding message:', error);
});

এটি সার্ভারে একটি মেসেজ অ্যাড করার জন্য mutation পাঠাবে এবং যখনই মেসেজ অ্যাড হবে, ক্লায়েন্টের সাবস্ক্রিপশন রেসপন্স হিসাবে সেই মেসেজ পাবে।

সারাংশ

GraphQL Subscriptions ব্যবহার করে আপনি Realtime Data Fetching করতে পারেন। Meteor এবং Apollo Server ব্যবহার করে আপনি ক্লায়েন্ট এবং সার্ভারের মধ্যে WebSocket এর মাধ্যমে রিয়েল-টাইম ডেটা আপডেট করতে পারবেন। Subscriptions-Transport-WS এর মাধ্যমে আপনি ডেটা পরিবর্তনের সাথে সাথে ক্লায়েন্টকে অবহিত করতে পারেন, যা রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে সহায়ক। Mutation এবং Subscription একসাথে কাজ করলে রিয়েল-টাইম ডেটা প্রক্রিয়া সহজ এবং কার্যকরী হয়ে ওঠে।